<!DOCTYPE html>
<html lang="en">
<head>
    <title>家人信息</title>
    <%- include('../../_global/baseLibs') %>
    
    <style>
        .delfamily{
            width: 80%;
            margin:0 auto;
            font-size: 0.9rem;
            text-align: center;
            margin-top:5rem;
            color: #0cb8ff;
            border:1px #0cb8ff solid;
            padding: 5px;
        }
    </style>

</head>
<body>
<section class="page-wrap page-family">
    <!-- header start -->
    <header id="header" class="header-box grey fixed" >
        <div class="header-content">
            <div class="left-tool">
                <a class="back"><i class="iconfont icon-back"></i></a>
            </div>
            <div class="title">家人信息</div>
        </div>
    </header>
    <!-- header end -->

    <!--content start-->
    <section class="content">
        <!-- 基本信息 start -->
       <aside class="plane-box first family-info-box">
           <header class="plane-header">
                <span class="name">基本信息</span>
               <div class="right-tool" id="updateMediCard_div">
                   <a class="tool-a"><i class="icon icon-edite"></i></a>
               </div>
           </header>
           <div class="base-info-box">
                <ul class="default-list">
                    <li>
                        <div class="item-inner" id="head_info">
                            <div class="item-media"><div class="img-wrap"><img class="img-response" src="/static/images/family/family-header-pic.png"></div></div>
                            <div class="item-content">
                                <h4 id="name">sdf</h4>
                                <p>
                                    <span class="year" id="age">nl岁</span>
                                    <span class="height">身高：sgcm</span>
                                    <span class="weight">体重：tzkg</span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
           </div>
          <!-- <header class="plane-header">
               <span class="name">实名信息</span>
               <div class="right-tool">
                   <a class="tool-a" href="#">去认证<i class="iconfont icon icon-more"></i></a>
               </div>
           </header>
           <div class="real-name-info">
               <p>您还未实名</p>
           </div>-->
       </aside>
        <!-- 基本信息 start -->

        <!--就诊卡 start-->
        <aside class="plane-box family-info-box">
            <header class="plane-header">
                <span class="name">就诊卡</span>
                <div class="right-tool" id="addMediCard_div">
                    <a class="tool-a">添加<i class="icon icon-add"></i></a>
                </div>
            </header>
            <ul class="default-list treatment-card-list" id="cardlist">
            </ul>
        </aside>
        <!--就诊卡 end-->
        <div class="delfamily">删除</div>
    </section>

    <!--content end-->

</section>
<style>
    .layer-inner-content{
        margin:-20px;
    }
    .layer-inner-content .setting-btn{
        color: #40AFFE;
        display: block;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-box-flex: 1;
        font-size: 14px;
        cursor: pointer;
        line-height: 50px;
        text-align: center;
        border-top: 1px solid #c2c2c2;
        /* background-color: rgba(255,255,255,.8);*/
    }
    .layer-inner-content .p-text{
        padding: 20px;
    }
    .layui-m-layerbtn span[yes]{
        color: #999;
    }
</style>

</body>
<script>

    var page_familyInfo = (function($, page_familyInfo) {
        /*家人信息维护*/
        var url_family_add = '/html/gzd/familyList/familyAdd.html';
        /*家人列表*/
        var url_family_list = '/html/gzd/familyList/familyList.html';
        /*绑卡*/
        var url_family_card = '/html/gzd/familyList/familyPatientCard.html';
        /*获取头像*/
        var uri_service_queryTx = '/api/gzd/jrlb/queryTx';
        /*删除*/
        var uri_service_delete = '/api/gzd/jrlb/delete';
        /*查询详细信息*/
        var uri_service_queryItem = '/api/gzd/jrlb/queryItem';
        /*查询就诊卡列表*/
        var uri_service_jzk_queryList = '/api/gzd/jzk/queryList';
        /*删除*/
        var uri_service_jzk_delete = '/api/gzd/jzk/delete';
        /*设置默认*/
        var uri_service_jzk_default = '/api/gzd/jzk/defaultJzk';

        page_familyInfo.init = function(){
            var jmjbxxid = $.QuickUrlUtils.getRequest("jmjbxxid");
            $("body").data('jmjbxxid', jmjbxxid);
            queryJmjbxx();
            queryJzkList();
            /*更新按钮回调*/
            $("#updateMediCard_div a").on('click', updateMediCardHandler);
            /*绑卡按钮回调*/
            $("#addMediCard_div").on('click', addMediCardHandler);
            /*删除按钮回调*/
            $(".delfamily").on('click', deleteHandler);
            /*就诊卡点击回调*/
            $("#cardlist").on('click', 'li', cardClickHandler);
            $("body").on('click', '.setting-btn', settingBtnClickHandler);
        }

        /*查询居民基本信息*/
        function queryJmjbxx(){
            $.QuickRemote.AjaxJson({
                funcName: uri_service_queryItem
                ,params: {
                    jmjbxxid: $("body").data('jmjbxxid')
                }
                ,callback: function(result) {
                    $("body").data('item', result);
                    setItem(result);
                    if(result.gxlx=="0"){
                        $(".delfamily").css("display","none")
                    }
                }
            });
        }

        /*查询已有的就诊卡*/
        function queryJzkList(){
            $("#cardlist").empty();
            $.QuickRemote.AjaxJson({
                funcName: uri_service_jzk_queryList
                ,params: {
                    jmjbxxid: $("body").data('jmjbxxid')
                }
                ,callback: function(result) {
                    var dict = $.JkcsZydmUtils.getDict({
                        tableName: 'jzklx'
                        ,keyValue: false
                    });
                    if(result){
                        $.each(result, function(){
                            var item = createCardItem(this, dict);
                            $("#cardlist").append(item);
                        });
                    }
                }
            });
        }

        function updateMediCardHandler(){
            var item = $("body").data("item");
            StoreCache.setCache('family_item_update', item);
            $.pageSwitch.goToUrl("family","familyAdd");
        }

        function addMediCardHandler(){
            var item = $("body").data("item");
            StoreCache.setCache('family_item', item);
            var jmjbxxid = item.jmjbxxid?item.jmjbxxid:"";
            $.pageSwitch.goToUrl("family","familyPatientCard","jmjbxxid="+jmjbxxid);
        }

        function deleteHandler(){
            $.QuickAlert.alertConfirm({
                content: '确定删除该记录吗'
                ,callback: function(){
                    var item = $("body").data('item');
                    var jmjbxxid = item['jmjbxxid'];
                    var gxlx = item['gxlx'];
                    $.QuickRemote.AjaxJson({
                        funcName: uri_service_delete
                        ,params: {
                            jmjbxxid: jmjbxxid
                            ,gxlx: gxlx
                        }
                        ,callback: function(result) {
                            /*保存成功*/

                            $.QuickAlert.alertNormal("删除成功", {
                                callback: function(){
                                    $.pageSwitch.goToUrl("family","familyList",null,{animate:"pop"});
                                }
                            });
                        }
                    });
                }
            });
        }

        function setItem(item){
            var xm = item['xm'];
            $("#head_info").find("#name").html(xm);
            var csrq = item['csrq'].split(" ")[0];
            var age = ages(csrq);
            var html = $("#head_info").find("#age").html();
            html = html.replace('nl', age);
            $("#head_info").find("#age").html(html);
            var sg = item['sg'];
            html = $("#head_info").find(".height").html();
            html = html.replace('sg', sg);
            $("#head_info").find(".height").html(html);
            var tz = item['tz'];
            html = $("#head_info").find(".weight").html();
            html = html.replace('tz', tz);
            $("#head_info").find(".weight").html(html);
            var txid = item['txid'];
            if(!StringUtils.isEmpty(txid)){
                var img = $("#head_info").find(".img-response");
                queryTx(img, txid);
            }
        }

        /*计算年龄*/
        function ages(str)
        {
            var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if(r==null)return false;
            var d= new Date(r[1], r[3]-1, r[4]);
            if(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4])
            {
                var Y = new Date().getFullYear();
                return (Y-r[1]);
            }
        }

        function queryTx(img, txid){
            $.QuickRemote.AjaxJson({
                funcName: uri_service_queryTx
                ,params: {txid: txid}
                ,callback: function(result) {
                    var src = result['src'];
                    if(!StringUtils.isEmpty(src)){
                        $(img).attr("src", src);
                    }
                }
            });
        }

        /*创建就诊卡视图*/
        function createCardItem(data, dict){
            var card = $($("#cardItem").html());
            card.data("item", data);
            var jzklx = data['jzklx'];
            var str = dict[jzklx];
            card.find(".name").html(str);
            card.find(".number").html(data['jzkh']);
            if(data['sfmr'] == '1'){
                card.find(".state-text").html('默认');
            }
            return card;
        }
        /*就诊卡点击回调*/
        function cardClickHandler(){
            $("body").data('selectCard', $(this).data('item'));
            $.QuickAlert.alertConfirm({
                content : '<div class="layer-inner-content">'
                +'<p class="p-text">操作</p>'
                +'<span class="setting-btn">设为默认</span>'
                + '</div>'
                ,btn: ['删除' , '取消']
                ,yes: function(){
                    /*删除回调*/
                    alertCloseHandler('deleteCard');
                }
                ,no: function(){
                    alertCloseHandler();
                }
            });
        };
        /*默认按钮回调*/
        function settingBtnClickHandler(){
            alertCloseHandler('defaultCard');
        }
        function alertCloseHandler(action){
            parent.layer.closeAll();
            var func = eval(action);
            if($.isFunction(func)){
                var card = $("body").data('selectCard');
                func.apply(this, [card['jzkid']]);
            }
        }
        function deleteCard(jzkid){
            $.QuickRemote.AjaxJson({
                funcName: uri_service_jzk_delete
                ,params: {jzkid: jzkid}
                ,callback: function(result) {
                    $.QuickAlert.alertNormal('删除成功', {
                        callback: queryJzkList
                    });
                }
            });
        }
        function defaultCard(jzkid){
            $.QuickRemote.AjaxJson({
                funcName: uri_service_jzk_default
                ,params: {
                    jzkid: jzkid
                }
                ,callback: function(result) {
                    $.QuickAlert.alertNormal('设置默认就诊卡成功', {
                        callback: queryJzkList
                    });
                }
            });
        }

        return page_familyInfo;
    })(jQuery, {})
</script>
<script type="text/html" id="cardItem">
    <li>
        <a>
            <div class="item-inner">
                <div class="item-media">
                    <div class="img-wrap">
                        <img class="img-response" src="/static/images/family/icon-card.png">
                    </div>
                </div>
                <div class="item-content">
                    <h4 class="name"></h4>
                    <p class="number"></p>
                </div>
                <div class="item-right">
                    <span class="state-text"></span>
                </div>
            </div>
        </a>
    </li>
</script>
</html>